<template>
  <div class="user">
    <page-search
      :searchFormConfig="searchFormConfig"
      @handleResetBtnClick="handleResetBtnClick"
      @handleSearchBtnClick="handleSearchBtnClick"
    ></page-search>
    <page-content
      pageName="users"
      :tableConfig="contentTableConfig"
      ref="pageContentRef"
      @pageContentEditBtnClick="pageContentEditBtnClick"
      @pageContentCreateBtnClick="pageContentCreateBtnClick"
    ></page-content>
    <page-modal
      :defaultInfo="defaultInfo"
      ref="pageModalRef"
      pageName="users"
      :pageModalFormConfig="pageModalFormConfigRef"
    ></page-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
import { useStore } from '@/store';

import pageSearch from '@/components/page-search/index'; // 你去引用base-ui, 我再引用你这个功能比较公共的组件
import pageContent from '@/components/page-content';
import pageModal from '@/components/page-modal';
import { searchFormConfig } from './config/search.config';
import { contentTableConfig } from './config/content.config';
import { pageModalFormConfig } from './config/modal.config';
import { usePageSearch } from '@/hooks/use-page-search';
import { usePageModal } from '@/hooks/use-page-modal';

export default defineComponent({
  name: 'user',
  components: {
    pageSearch,
    pageContent,
    pageModal
  },
  setup() {
    const store = useStore();
    // 1.将pageSearch全部导出
    const [pageContentRef, handleResetBtnClick, handleSearchBtnClick] =
      usePageSearch();

    // 2.page-modal逻辑
    // 点击创建显示password input
    const createCb = () => {
      pageModalFormConfig.ElFormItems.find((item) => {
        item.type === 'password' && (item.isHidden = false);
      });
    };
    // 点击编辑隐藏password input
    const editCb = () => {
      pageModalFormConfig.ElFormItems.find((item) => {
        item.type === 'password' && (item.isHidden = true);
      });
    };
    const [
      pageModalRef,
      defaultInfo,
      pageContentCreateBtnClick,
      pageContentEditBtnClick
    ] = usePageModal(createCb, editCb, ['新建用户', '编辑用户']);

    // 3.下面的这步操作是为了响应式,在制作dialog的部门与角色时.
    const pageModalFormConfigRef = computed(() => {
      // 将department与role对应的options动态添加到formConfig文件当中
      // 从items得到需要改变的item
      pageModalFormConfig.ElFormItems.map((item) => {
        // 给department添加
        if (item.field === 'departmentId') {
          store.state.departmentList.map((option) => {
            item.options?.push({ title: option.name, value: option.id });
          });
          // 给role添加
        } else if (item.field === 'roleId') {
          store.state.roleList.map((option) => {
            item.options?.push({ title: option.name, value: option.id });
          });
        }
      });
      return pageModalFormConfig;
    });

    return {
      searchFormConfig, // redForm的配置文件
      contentTableConfig, // redTable的配置文件
      pageContentRef,
      handleResetBtnClick,
      handleSearchBtnClick,
      pageModalFormConfigRef,
      pageModalRef,
      pageContentCreateBtnClick,
      pageContentEditBtnClick,
      defaultInfo
    };
  }
});
</script>

<style scoped lang="less">
/* 向red-form传递数据的过程
1.我在这里写好配置文件 searchFormConfig, 用父传子的形式传给page-search.
2.page-search拿到数据,根据searchFormConfig的filed字段遍历得到formModelData(需要双向绑定到每个input). 我把formModelData双向绑定绑定给red-form.
3.red-form接收modelValue得到formModelData, watch这个对象,每有input改变就发射 @update:modelValue事件
 */
</style>
